@visual-regression-tracker/sdk-js

JS SDK for Visual Regression Tracker

Npm

https://www.npmjs.com/package/@visual-regression-tracker/sdk-js

Install

npm install @visual-regression-tracker/sdk-js

Usage

Import

import {
  VisualRegressionTracker,
  Config,
} from "@visual-regression-tracker/sdk-js";

Configure

Explicit config from code

const config: Config = {
  // URL where backend is running
  // Required
  apiUrl: "http://localhost:4200",

  // Project name or ID
  // Required
  project: "Default project",

  // User apiKey
  // Required
  apiKey: "tXZVHX0EA4YQM1MGDD",

  // Current git branch
  // Required
  branchName: "develop",

  // Log errors instead of throwing exceptions
  // Optional - default false
  enableSoftAssert: true,

  // Unique ID related to one CI build
  // Optional - default null
  ciBuildId: "SOME_UNIQUE_ID",
};

Or, as JSON config file vrt.json

Used only if not explicit config provided Is overriden if ENV variables are present

{
  "apiUrl": "http://localhost:4200",
  "project": "Default project",
  "apiKey": "tXZVHX0EA4YQM1MGDD",
  "ciBuildId": "commit_sha",
  "branchName": "develop",
  "enableSoftAssert": false
}

Or, as environment variables

Used only if not explicit config provided

VRT_APIURL="http://localhost:4200"
VRT_PROJECT="Default project"
VRT_APIKEY="tXZVHX0EA4YQM1MGDD"
VRT_CIBUILDID="commit_sha"
VRT_BRANCHNAME="develop"
VRT_ENABLESOFTASSERT=true

Setup

vrt.start();

Teardown

vrt.stop();

Assert

await vrt.track({
  // Name to be displayed
  // Required
  name: "Image name",

  // Base64 encoded string
  // Required
  imageBase64: image,

  // Allowed mismatch tollerance in %
  // Optional
  diffTollerancePercent: 0,

  // Optional
  os: "Mac",

  // Optional
  browser: "Chrome",

  // Optional
  viewport: "800x600",

  // Optional
  device: "PC",

  // Array of areas to be ignored
  // Optional
  ignoreAreas: [
    {
      // X-coordinate relative of left upper corner
      // Required
      x: 10;

      // Y-coordinate relative of left upper corner
      // Required
      y: 20;

      // Area width in px
      // Required
      width: 300;

      // Height width in px
      // Required
      height: 400;
    }
  ]
});